<!DOCTYPE html>
<html lang="en">
<!-- 网站头部 -->

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Easy Cat Timer -cwb</title>
  <!-- 网站图标 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 初始化页面样式 -->
  <link rel="stylesheet" href="./css/initial.css">
  <!-- 导航栏样式 -->
  <link rel="stylesheet" href="./css/navigation.css">
</head>

<!-- 网站页面区域 -->

<body>
  <!-- 音效 -->
  <div class="audio">
    <!-- 鼠标按下 -->
    <!-- 在页面加载之后，载入整个音频 -->
    <audio id="audio_btnDown" src="asset/audio/ButtonDown.wav" preload="auto"></audio>
  </div>
  <!-- 网站导航栏 -->
  <nav class="navigation-panel">
    <!-- 切换按钮 -->
    <div class="toggle-panel">
      <div class="toggle"></div>
    </div>
    <!-- 关闭按钮 -->
    <div class="close-panel">
      <!-- 居中 -->
      <div class="show-panel">
        <!-- Logo -->
        <a href="./index.html" class="logo">
          <img src="./asset/image/navigation/Logo-Samll.png" alt="">
        </a>
        <!-- 版本号 -->
        <div class="version">
          <!-- 矩形 -->
          <div class="rect"></div>
          <!-- 三角 -->
          <div class="triangle"></div>
          <!-- 文字 -->
          <div class="text">v1.0</div>
        </div>
        <!-- 这是什么? -->
        <div class="whatIsIt">
          <a href="./what-is-it/index.html" target="_blank">这是什么?</a>
          <div class="line"></div>
        </div>
        <!-- 语言 -->
        <div class="language">
          <div class="text">语言</div>
          <div class="line"></div>
          <div class="choose-panel">
            <!-- 上箭头 -->
            <div class="up-arrow"></div>
            <div class="choose-body">
              <a class="english" href="">English</a><br>
              <a class="" href="">简体中文</a>
            </div>
          </div>
        </div>
        <!-- 空白 -->
        <div class="null"></div>
        <!-- 下载 -->
        <a class="download" href="">下载桌面端</a>
        <!-- 关闭 -->

        <div class="close">
          <div class="close-img"></div>
        </div>
      </div>
    </div>
  </nav>
  <!-- 网站主题 -->
  <div class="main">
    <!-- Logo -->
    <div class="logo">
      <div class="logo-img"></div>
    </div>
    <!-- 计时器 -->
    <div class="timer">
      <!-- 标题栏 -->
      <div class="titleBarUi">
        <!-- TODO: 后续再做 -->
        <button class="settingToggle"></button>
        <button class="minBtn"></button>
        <button class="closeBtn"></button>
      </div>
      <!-- 主界面 -->
      <div class="beginUi">
        <!-- 背景 -->
        <div class="background">
          <div class="yellow"></div>
          <div class="gray"></div>
        </div>
        <!-- 时钟 -->
        <div class="clock">
          <input type='number' class='minuteInput' value='24'>
          <div class="colonText">:</div>
          <input type='number' class='secondInput' value='00'>
        </div>
      </div>
    </div>
    <!-- 导航条 -->
    <div class="navigationBar">
      <a class="whatIsIt" href="./what-is-it/index.html" target="_blank">
        <div class="bubble"></div>
        <div class="rect"></div>
        <div class="text"></div>
      </a>
      <a class="download" href="./download/index.html" target="_blank">
        <div class="bubble"></div>
        <div class="rect"></div>
        <div class="text"></div>
      </a>
      <div class="other">
        <div class="bubble"></div>
        <div class="rect"></div>
        <div class="text"></div>
      </div>
    </div>
  </div>

  <script src="./js/script.js"></script>
</body>

</html>